<template>
  <div class="datamax">
    <!-- header_end -->
    <div class="view-container">
      <!-- modules-key-end -->
      <div id="view-profile" :style="modules.imgstyleright">
        <div id="view-imgs" ref="view-imgs" :style="modules.imgstyle">
          <div id="imgmodules">
            <div class="imgmoduleitemSelect_box">
              <div class="imgmoduleitem_time">
                   <div v-on:click="turnToPage('previewhome',46)" style='cursor: pointer;font-size:30px;position: absolute;top:70px;left:50px;color:rgb(0,150,216);z-index: 2;'>首页</div>
              </div>
              <div class="imgmoduleitem_time">
                   <div v-on:click="turnToPage('previewtjt',47)" style='color:rgb(0,150,216);cursor: pointer;font-size:30px;position: absolute;top:70px;left:200px;z-index: 2;'>统计图</div>
              </div>
              <div class="imgmoduleitem_time">
                   <div v-on:click="turnToPage('previewfxyj',49)" style='color:rgb(255,144,0);cursor: pointer;font-size:30px;position: absolute;top:70px;left:370px;z-index: 2;border-bottom: 2px solid rgb(255,144,0) ;padding:0px 10px 10px  10px'>风险预警</div>
              </div>
              <div class="imgmoduleitem_time">
                   <div v-on:click="turnToPage('previewsspd',50)" style='cursor: pointer;font-size:30px;position: absolute;top:70px;left:1420px;color:rgb(0,150,216);z-index: 2'>实时盘点</div>
              </div>
              <div>
                 <img :src="homepng" v-on:click="turnToHome()" style='width:33px;height:30px;cursor: pointer;font-size:30px;position: absolute;top:80px;left:1720px;color:rgb(0,150,216);z-index: 2'>
              </div>
              <div>
                 <img :src="logout" v-on:click="turnToLogout()" style='width:33px;height:30px;cursor: pointer;font-size:30px;position: absolute;top:80px;left:1820px;color:rgb(0,150,216);z-index: 2'>
              </div>
              <div class="imgmoduleitem_time" style='position: absolute;top:150px;left:740px;z-index: 3'>
                <span class="imgmoduleitem_time_span">选择地区:</span>
                <div class="time_box">
                  <p class="time_box_p">
                    <input type="text" v-model='province' placeholder="请选择省">
                    <img src="../../assets/imgs/xia.png" alt="">
                  </p>
                  <select @change="provinceChange" v-model="province" style="width:160px;height:35px" class="sheng_select">
                    <option v-for="item in provinceList" :value="item.name" :key="item.id">
                      {{item.name }}</option>
                  </select>
                </div>
                <div class="time_box">
                  <p class="time_box_p">
                    <input type="text" v-model='city' placeholder="请选择市">
                    <img src="../../assets/imgs/xia.png" alt="">
                  </p>
                  <select @change="cityChange" v-model="city" style="width:160px;height:35px" class="sheng_select">
                    <option v-for="item in cityList" :value="item.name" :key="item.id">
                      {{item.name }}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="imgmoduleitem"  v-for="item in imgmodules" :id="item.id" :style="item.style">
              <div v-if="item.type=='tupian'">
                 <img :src="item.config.imgsrc" :style="{'width':item.style.width,'height':item.style.height}">
              </div> 
              <div class="im-dhwb" v-if="item.type=='danhangwenben'">
                <div :style="item.config.widgets.style">{{item.config.widgets.text}}</div>
              </div><!-- im-dhwb_end -->
              <div class="im-bg" :style="{'font-size':item.config.widgets.xStyle.fontSize+'px','color':item.config.widgets.xStyle.color||'#fff'}" v-if="item.type == 'biaoge'">
                <div class="im-bg-container">
                    <div class="im-bg-header">
                      <table cellspacing="0" cellpadding="0" border="0">
                        <colgroup>
                        </colgroup> 
                        <thead>
                          <tr>
                            <th v-for="(itemheader,index) in item.config.widgets.x" class="im-bg-header-column">
                              <div class="im-bg-header-cell">
                                <span class="">{{itemheader}}</span> 
                              </div>
                            </th>
                           </tr>
                         </thead>
                         <tbody class="im-bg-data-tbody" >
                          <tr class="im-bg-data-row" v-for="(itembody,index) in item.config.widgets.y">
                            <td v-for="(itemcolumn,index) in itembody" class="im-bg-data-column">
                              <div class="im-bg-data-cell">
                                <span>{{itemcolumn}}</span> 
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <h3 class="table-nothing" v-if="(item.config.widgets.y.length==0)">
                          什么都没有哦！
                      </h3>
                    </div>
                    <Page class="table-pages" @on-change="pageChange" :page-size="pagesize" :total="total" size="small" />
                </div>
              </div><!-- im-bg_end -->
              <div class="im-szt" v-if="item.type=='shuzitu'">
                 <div class="im-szt-container" :style="item.config.widgets.style">
                   <div class="im-szt-num" :style="item.config.widgets.numBackStyle" v-for="num in item.config.widgets.text.split('')">
                      {{num}}
                   </div>
                 </div>
              </div>
              <!-- im-szt_end -->
            </div>
          </div>
          <!-- imgmodules_end -->       
        </div>
        <!-- view-imgs_end -->
      </div>
      <!-- view-profile_end -->
    </div>
    <!-- view-container_end -->
  </div>
</template>
<script>
  var echarts = require('echarts');
  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');

  var editors =  require('vue2-ace-editor');
  import 'echarts/map/js/china'
  import { Sketch } from 'vue-color'
  import { mapActions } from 'vuex'
  import moduledata from '@/store/module/moduledata'
  import moduledefault from '@/store/module/moduledefault'
  // 截图上传已经修改了toPng的源码，加入了scale的判断
  import domtoimage from 'dom-to-image';
  export default {
    name: 'previewfxyj',
    components:{
      editor: editors,
      'photoshop-picker': Sketch,
    },
    data () {
      return {
        total:"0",
        pagesize:6,
        currentpage:"1",
        cityList:[],
        city:"",
        cityid:"",
        provinceList:[],
        province:"",
        homepng:require("../../assets/imgs/29.png"),
        logout:require("../../assets/imgs/30.png"),
        moduledata:moduledata,
        colors:"#fff",
        msg: '',
        imgtype:"",
        message:{
          style:{
            display:"none"
          }
        },
        currentmodule:{
          datatypeset:{ //数据样式保存当前点击的哪个颜色块
            index:"",
            indexcolor:"",
            num:""
          },
          content:"",//编辑器数据内容
          type:"",//组件类型
          apitype:{
            display:"none" //api下拉框是否展开
          },
          config:{
            imgsrc:"",
            chart:false, //是否是百度地图组件
            img:true,//是否是图片组件
            datas:false,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:{},
            defaultdata:""
          },
          editorconfig:{ //编辑器配置
            theme:"monokai",
            lang:"json",
            enableEmmet:true
          },
          id:"",
          name:"",
          width:"",
          height:"",
          left:"",
          top:"",
          zindex:""
        },
        // 大屏设置
        defaultsettings:{
          style:{
            width:"",
            height:"",
            display:"none"
          },
          // 菜单样式
          menustyle:{
            left:"10px",
            top:"10px",
            display:"none"
          },
          title:"测试模板",
          viewconfigstyle:{
            display:"none"
          },
          filename:"",
          src:"",//背景图
          headimg:"",//缩略图
          resizetype:1,
          resizetypename:"全屏等比缩放(大屏/PC)",
          // 清除背景图
          clearnstyle:{
            display:"none"
          },
          // 图片选择
          srcchoosestyle:{
            display:""
          },
          // 缩放方式选择
          resizetypestyle:{
            display:"none"
          },
          // 数据请求方式
          datatypestyle:{
            style:{
              display:"none"
            },
            name:"静态数据"
          },
           // 选择背景图
          choosestyle:{
            display:""
          }
        },
        // 可供选择的选项
        modules:{
          radiodata:100,
          radio:1,
          // 大屏默认宽高
          defaulestyle:{
            width:"",
            height:""
          },
          moduleid:"",
          imgstyleright:{
              right:"0px",
              "overflow-x": "auto",
              "overflow-y": "hidden"
          },
          // 缩放的比例
          imgstyle:{
              "background-size": "100% 100%",
              "background-repeat":"no-repeat",
              "background-image":"",
              "margin-left":"0px",
              "margin-top":"0px",
              width:"1920px",
              height:"1080px",
          },
          // canvas栅格样式
          gridstype:{
            display:"none",
            opacity:0.3
          },
          style:{
            display:"none"
          },
          modulesource:[]
        },
        // 所有的组件选项
        modulessource:[
          {
            id:"jichu",
            type:"",
            img:require('../../assets/imgs/3.png'),
            name:"统计组件",
            modules:[
              { 
                type:"jichuzhuzhuangtu",
                name:"基础柱状图",
                id:"1",
                src:require("../../assets/imgs/15.png"),
                data:{}
              },{ 
                type:"caisezhuzhuangtu",
                name:"彩色柱状图",
                id:"2",
                src:require("../../assets/imgs/2.png"),
                data:{}
              },
              { 
                type:"tiaoxingtu",
                name:"条形图",
                id:"3",
                src:require("../../assets/imgs/16.png"),
                data:{}
              },
              { 
                type:"tupian",
                name:"图片",
                id:"4",
                src:require("../../assets/imgs/13.png"),
                data:{}
              },
              { 
                type:"jinduhuantu",
                name:"进度环图",
                id:"5",
                src:require("../../assets/imgs/1.png"),
                data:{}
              },
              { 
                type:"meiguitu",
                name:"玫瑰图",
                id:"6",
                src:require("../../assets/imgs/17.png"),
                data:{}
              }
            ]
          },{
            id:"ditu",
            type:"ditu",
            img:require('../../assets/imgs/20.png'),
            name:"地图组件",
            modules:[
              { 
                type:"dituzujian",
                name:"地图",
                id:"7",
                src:require("../../assets/imgs/14.png"),
                data:{}
              }
            ]
          },{
            id:"wenzi",
            type:"wenzi",
            img:require('../../assets/imgs/19.png'),
            name:"文字组件",
            modules:[
              { 
                type:"danhangwenben",
                name:"单行文本",
                id:"8",
                src:require("../../assets/imgs/18.png"),
                data:{}
              },{ 
                type:"biaoge",
                name:"表格",
                id:"9",
                src:require("../../assets/imgs/21.png"),
                data:{}
              },{ 
                type:"shuzitu",
                name:"表格",
                id:"10",
                src:require("../../assets/imgs/22.png"),
                data:{}
              }
            ]
          },
        ],
        imgmodules:[
        ], //保存每个组件的信息，包括id等
        zooms:{
          show:false, //是否展示遮罩拖拽层
          resize:false, //是否缩放，缩放模式，防止点击事件和mousedown事件冲突
          ctrenter:false,//ctr按键是否按下,多选模式
          type:"",//拖拽缩放时候的类型，总共8个，left,top,right,bottom...
          style:{
            width:"",
            height:"",
            top:"",
            left:""
          },//拖拽组件的样式保存
        }
      }
    },
    created(){
      var _self = this;
    },
    mounted:function(){
      let moduleid = this.$route.query.id||"";
      this.modules.moduleid = moduleid;
      this.getCity();
      // this.moduleContent();
      window.onresize = () => {
        this.changeWindow();
      }
      window.oncontextmenu = function(){return false;}
    },
    methods:{
      ...mapActions([
          'moduleMessage',
          'fileUpload',
          'editModule',
          'ajax'
      ]),
      pageChange(page){
        this.currentpage = page;
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].type=="biaoge") {
            this.reBiaoge("",this.imgmodules[i].id)
          }
        }
      },
      provinceChange(){
        for (var i = 0; i < this.provinceList.length; i++) {
          if (this.provinceList[i].name == this.province) {
            this.cityList = this.provinceList[i].city;
            this.city = this.cityList[0].name;
            this.cityid=this.cityList[0].id;
          }
        }
        this.moduleContent();
      },
      cityChange(){
        for (var i = 0; i < this.cityList.length; i++) {
          if (this.cityList[i].name==this.city) {
            this.cityid=this.cityList[i].id;
          }
        }
        this.moduleContent();
      },
      getCity(){
        var param ={
          api: "http://114.115.150.143:8080/pasture-web/statistics/getProvinces.do",
          type:"post"
        }
        this.ajaxs(param).then(function(res){
          if (res.code=="1") {
            var provinces = res.data;
            this.provinceList = provinces;
            this.province = provinces[0].name;
            this.cityList = provinces[0].city;
            this.city = this.cityList[0].name;
            this.cityid=this.cityList[0].id;
            this.moduleContent();
          }else{
            return;
          }
        }.bind(this)) 
      },
      // 获取大屏详情
      moduleContent(){
        let params = {
          id:this.modules.moduleid
        }
        if (!this.modules.moduleid) {
          return;
        }
        this.moduleMessage({params}).then(function(res){
            if (res.code=="1") {
                var data = res.data;
                if (!res.data) {
                  return;
                }
                if (res.data.datas) {
                  this.imgmodules = JSON.parse(res.data.datas);
                  this.getModuleData();
                }
                this.modules.defaulestyle.width = data.width;
                this.modules.defaulestyle.height = data.height;
                this.defaultsettings.title = data.title;
                this.modules.imgstyle["background-image"] = "url("+data.coverimg+")";
                this.defaultsettings.src=data.coverimg;
                this.defaultsettings.headimg=data.headimg;
                this.defaultsettings.resizetype = data.resizetype;
                
                switch(data.resizetype) {
                  case "0":
                    this.defaultsettings.resizetypename="全屏等比缩放(大屏/PC)";
                    break;
                  case "1":
                    this.defaultsettings.resizetypename="按高度适配(横向滚动)";
                    break;
                  case "2":
                    this.defaultsettings.resizetypename="按宽度适配(移动端)";
                    break;
                }
                this.changeWindow();
            }else{
              this.$Message(res.message);
            }
        }.bind(this))
      },
      turnToHome(){
        location.href=moduledata.url.home;
      },
      turnToLogout(){
        location.href=moduledata.url.logout;
      },
      turnToPage(page,id){
        this.$router.push({ 
          path: page, 
          query: { 
            id: id,
            token:this.$route.query.token
          }
        })
      },
      titleChange(e){
        this.defaultsettings.title= e.target.value;
        this.editModules();
      },
      // 获取基础数据并渲染，判断是否定时获取，判断是否api获取等
      getModuleData(){
          for (let i = 0; i < this.imgmodules.length; i++) {
            if(this.imgmodules[i].type=="jichuzhuzhuangtu"||this.imgmodules[i].type=="caisezhuzhuangtu"||this.imgmodules[i].type=="meiguitu"||this.imgmodules[i].type=="tiaoxingtu"||this.imgmodules[i].type=="jinduhuantu"||this.imgmodules[i].type=="danhangwenben"||this.imgmodules[i].type=="shuzitu"||this.imgmodules[i].type=="biaoge"||this.imgmodules[i].type=="duidiezhuzhuangtu"||this.imgmodules[i].type=="jiaocuozhengfuzhoubiaoqiantu"||this.imgmodules[i].type=="qiantaobingtu"||this.imgmodules[i].type=="jizuobiaozhuzhuangtu"||this.imgmodules[i].type=="rilitu"||this.imgmodules[i].type=="ditu"){
              this.autoGetData(this.imgmodules[i].type,this.imgmodules[i].id);
              if(this.imgmodules[i].config.datastype=="api"&&this.imgmodules[i].config.autodata=="开启"){
                let type = this.imgmodules[i].type;
                let id = this.imgmodules[i].id;
                let time = setInterval(function(){
                    if (this.imgmodules[i].config.datastype=="api"&&this.imgmodules[i].config.autodata=="开启"&&this.imgmodules[i].style.display!="none") {
                      this.autoGetData(type,id);
                    }
                }.bind(this),(this.imgmodules[i].config.autodatatime||10)*1000);
                this.imgmodules[i].config.time = time;
              }
            }else if(this.imgmodules[i].type=="ditu"){
              this.reDitu(i,this.imgmodules[i].id)
            }
          // 最后将会去掉这段文本
           // this.$nextTick(() => {
           //    if (this.imgmodules[i].config.datas&&this.imgmodules[i].config.chart) {
           //      if (this.imgmodules[i].chart) {
           //        this.imgmodules[i].chart.setOption(this.imgmodules[i].config.widgets,true);
           //        this.imgmodules[i].chart.resize();
           //      }else{
           //        var myChart = echarts.init(document.getElementById(this.imgmodules[i].id));
           //        this.imgmodules[i].chart = myChart;
           //        this.imgmodules[i].chart.setOption(this.imgmodules[i].config.widgets,true);
           //        this.imgmodules[i].chart.resize();
           //      } 
           //    }   
           //  })
          } //for_end
      },
       autoGetData(type,id){
        // 非当前页面
        if (this.$route.path!="/previewfxyj") {
          return;
        }
        if (type=="jichuzhuzhuangtu") {
          this.reJichuzhuzhuangtu("",id);
        }else if (type=="caisezhuzhuangtu"){
          this.reCaisezhuzhuangtu("",id);
        }else if (type=="duidiezhuzhuangtu"){
          this.reDuidiezhuzhuangtu("",id);
        }else if (type=="jiaocuozhengfuzhoubiaoqiantu"){
          this.reJiaocuozhengfuzhoubiaoqiantu("",id);
        }else if (type=="qiantaobingtu"){
          this.reQiantaobingtu("",id);
        }else if (type=="meiguitu") {
          this.reMeiGuitu("",id);
        }else if (type=="tiaoxingtu") {
          this.reTiaoxingtu("",id);
        }else if(type=="jinduhuantu"){
          this.reJinduhuantu("",id)
        }else if(type=="danhangwenben"){
          this.reDanhangwenben("",id)
        }else if(type=="shuzitu"){
          this.reShuzitu("",id)
        }else if(type=="biaoge"){
          this.reBiaoge("",id)
        }else if(type=="ditu"){
          this.reDitu("",id)
        }else if(type=="rilitu"){
          this.reRilitu("",id)
        }else if(type=="jizuobiaozhuzhuangtu"){
          this.reJizuobiaozhuzhuangtu("",id)
        }
      },
      changeWindow(){
        let windowWidth = document.body.clientWidth;
        let windowHeight = document.body.clientHeight;
        let windowRadio = windowWidth/windowHeight;
        let dataRadio = this.modules.defaulestyle.width/this.modules.defaulestyle.height;
        if (this.defaultsettings.resizetype=="1") {
            this.modules.imgstyleright['overflow-x']="auto";
            this.modules.imgstyleright['overflow-y']="hidden";
            // 为了消除滚动条的影响
            if (windowRadio>=dataRadio) {
                this.modules.radio = windowHeight/this.modules.defaulestyle.height;
            }else{
                this.modules.radio = (windowHeight-17)/this.modules.defaulestyle.height;
            }
            
            this.modules.imgstyle["transform"]="scale("+ this.modules.radio+")";
            this.modules.imgstyle["width"]=this.modules.defaulestyle.width+"px";
            this.modules.imgstyle["height"]=this.modules.defaulestyle.height+"px";
            // margin-top的计算方法，scale会导致缩放了却会占用空间，
            if (this.modules.radio>=1) {
              this.modules.imgstyle["margin-top"] = this.modules.defaulestyle.height*(this.modules.radio-1)+"px";
            }else{
              this.modules.imgstyle["margin-top"] = "-"+this.modules.defaulestyle.height*(1-this.modules.radio)+"px";
            }
            this.modules.imgstyle["margin-left"] = "0px";  
            return;
        }
        if (this.defaultsettings.resizetype=="2") {
            this.modules.imgstyleright['overflow-x']="hidden";
            this.modules.imgstyleright['overflow-y']="auto";

            // 为了消除滚动条的影响
            if (windowRadio>=dataRadio) {
                this.modules.radio = (windowWidth-17)/this.modules.defaulestyle.width;
            }else{
                this.modules.radio = windowWidth/this.modules.defaulestyle.width;
            }
            this.modules.imgstyle["transform"]="scale("+ this.modules.radio+")";
            this.modules.imgstyle["width"]=this.modules.defaulestyle.width+"px";
            this.modules.imgstyle["height"]=this.modules.defaulestyle.height+"px";          
            if (this.modules.radio>=1) {
              this.modules.imgstyle["margin-top"] = this.modules.defaulestyle.height*(this.modules.radio-1)+"px";
            }else{
              this.modules.imgstyle["margin-top"] = "-"+this.modules.defaulestyle.height*(1-this.modules.radio)+"px";
            }
            
            this.modules.imgstyle["margin-left"] = "0px";        
            return;
        }
        if (this.defaultsettings.resizetype=="0") {
          this.modules.imgstyleright['overflow-x']="hidden";
          this.modules.imgstyleright['overflow-y']="hidden";
        }
        if (windowRadio>=dataRadio) {
          if (this.defaultsettings.resizetype=="0") {
              this.modules.radio = windowHeight/this.modules.defaulestyle.height;
              this.modules.imgstyle["transform"]="scale("+ this.modules.radio+")";
              this.modules.imgstyle["width"]=this.modules.defaulestyle.width+"px";
              this.modules.imgstyle["height"]=this.modules.defaulestyle.height+"px";
              if (this.modules.radio>=1) {
                this.modules.imgstyle["margin-top"] = this.modules.defaulestyle.height*(this.modules.radio-1)+"px";
              }else{
                this.modules.imgstyle["margin-top"] = "-"+this.modules.defaulestyle.height*(1-this.modules.radio)+"px";
              }
              this.modules.imgstyle["margin-left"] = (windowWidth-this.modules.defaulestyle.width*this.modules.radio)/2+"px";  
          }
          
        }else{
          if (this.defaultsettings.resizetype=="0") {
            this.modules.radio = windowWidth/this.modules.defaulestyle.width;
            this.modules.imgstyle["transform"]="scale("+ this.modules.radio+")";
            this.modules.imgstyle["width"]=this.modules.defaulestyle.width+"px";
            this.modules.imgstyle["height"]=this.modules.defaulestyle.height+"px";
            
            this.modules.imgstyle["margin-left"] ="0px";
            this.modules.imgstyle["margin-top"] = ((windowHeight-this.modules.defaulestyle.height*this.modules.radio)/2-this.modules.defaulestyle.height*(1-this.modules.radio))+"px";
          }
        }

        
      },
      moduleListHidden(){
        this.modules.style.display="none"
      },
      // 缩放时候只是重新计算宽度
      resizeWidth(){
        this.zooms.show = true;
        this.zooms.style.width = Ce.target.width+"px";
      },
      // 缩放时候只是重新计算高度
      resizeHeight(){
        this.zooms.show = true;
        this.zooms.style.height = Ce.target.height+"px";
      },
      // 缩放时候重新计算高度和宽度
      resizeRightBottom(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let widthRadio = (left/parseFloat(this.zooms.style.width.replace('px','')));
        let heightRadio = (top/parseFloat(this.zooms.style.height.replace('px','')));
        // 先变更遮罩层的宽高
        this.zooms.style.width = (parseFloat(this.zooms.style.width.replace('px',''))+left)+"px";
        this.zooms.style.height = (parseFloat(this.zooms.style.height.replace('px',''))+top)+"px";
        //拖动和缩放已经选中的组件
        this.reSizeHeightAndWidthModules(widthRadio,heightRadio);
      },
      resizeBottomMouseMove(e){
        e.preventDefault();
      },
      resizeMouseMove(e){
        e.preventDefault();
      },
      resizeRightMouseMove(e){
        e.preventDefault();
      },
      boardMouseMove(e){
        e.preventDefault();
      },
      //拖动已经选中的组件,重新更新所有已选中的组件的位置
      moveModules(Ce,left,top){
        // 先更新每个组件的位置
          for (let j = 0; j < this.imgmodules.length; j++) {
              if ( this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                let disY = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.left = (left + disX) + 'px';
                this.imgmodules[j].style.top = (top + disY) + 'px';
              }
          }
          // 然后再更新拖拽组件的位置
          this.currentModuleMoveResize();
      },
      // 向右拉动时候只计算宽度
      resizeRight(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let widthRadio = (left/parseFloat(this.zooms.style.width.replace('px','')));
        // 先变更遮罩层的宽高
        this.zooms.style.width = (parseFloat(this.zooms.style.width.replace('px',''))+left)+"px";
        //拖动和缩放已经选中的组件
        this.reSizeWidthModules(widthRadio);
      },
      // 向下拉动时候只计算宽度
      resizeBottom(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let heightRadio = (top/parseFloat(this.zooms.style.height.replace('px','')));
        // 先变更遮罩层的宽高
        this.zooms.style.height = (parseFloat(this.zooms.style.height.replace('px',''))+top)+"px";
        //拖动和缩放已经选中的组件
        this.reSizeHeightModules(heightRadio);
      },
      /*
        向左拉动只需要计算宽度和左侧距离
       */
      resizeLeft(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let widthRadio = (left/parseFloat(this.zooms.style.width.replace('px','')));
        let oldZoomLeft = parseFloat(this.zooms.style.left.replace('px',''));
        let newZoomLeft = oldZoomLeft+left;
        // 先变更遮罩层的宽高
        this.zooms.style.width = (parseFloat(this.zooms.style.width.replace('px',''))-left)+"px";
        this.zooms.style.left = newZoomLeft + "px";
        //拖动和缩放已经选中的组件
        this.reSizeLeftModules(widthRadio,oldZoomLeft,newZoomLeft);
      },
      reSizeLeftModules(widthRadio,oldZoomLeft,newZoomLeft){
        let styleLeft = parseFloat(this.zooms.style.left.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.width.replace("px",""));
                let disLeft = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                this.imgmodules[j].style.width = (disX - disX*widthRadio) + 'px';
                this.imgmodules[j].style.left = (newZoomLeft+(disLeft-oldZoomLeft)*(1-widthRadio))+'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      resizeRightTop(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let widthRadio = (left/parseFloat(this.zooms.style.width.replace('px','')));
        let heightRadio = (top/parseFloat(this.zooms.style.height.replace('px','')));
        let oldZoomLeft = parseFloat(this.zooms.style.left.replace('px',''));
        let oldZoomTop = parseFloat(this.zooms.style.top.replace('px',''));
        let newZoomTop = oldZoomTop+top;
        // 先变更遮罩层的宽高
        this.zooms.style.width = (parseFloat(this.zooms.style.width.replace('px',''))+left)+"px";
        this.zooms.style.height = (parseFloat(this.zooms.style.height.replace('px',''))-top)+"px";
        this.zooms.style.top = newZoomTop + "px";
        //拖动和缩放已经选中的组件
        this.reSizeRightTopModules(widthRadio,heightRadio,oldZoomLeft,oldZoomTop,newZoomTop);
      },
      reSizeRightTopModules(widthRadio,heightRadio,oldZoomLeft,oldZoomTop,newZoomTop){
        let styleLeft = parseFloat(this.zooms.style.left.replace("px",""));
        let styleTop = parseFloat(this.zooms.style.top.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.width.replace("px",""));
                let disY = parseFloat(this.imgmodules[j].style.height.replace("px",""));
                let disLeft = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                let disTop = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.width = (disX + disX*widthRadio) + 'px';
                this.imgmodules[j].style.height = (disY - disY*heightRadio) + 'px';
                this.imgmodules[j].style.left = (oldZoomLeft+(disLeft-oldZoomLeft)*(1+widthRadio))+'px'; 
                this.imgmodules[j].style.top = (newZoomTop+(disTop-oldZoomTop)*(1-heightRadio))+'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      resizeTop(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let heightRadio = (top/parseFloat(this.zooms.style.height.replace('px','')));
        let oldZoomTop = parseFloat(this.zooms.style.top.replace('px',''));
        let newZoomTop = oldZoomTop+top;
        // 先变更遮罩层的宽高
        this.zooms.style.height = (parseFloat(this.zooms.style.height.replace('px',''))-top)+"px";
        this.zooms.style.top = newZoomTop + "px";
        //拖动和缩放已经选中的组件
        this.reSizeTopModules(heightRadio,oldZoomTop,newZoomTop);
      },
      reSizeTopModules(heightRadio,oldZoomTop,newZoomTop){
        let styleTop = parseFloat(this.zooms.style.top.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disY = parseFloat(this.imgmodules[j].style.height.replace("px",""));
                let disTop = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.height = (disY - disY*heightRadio) + 'px';
                this.imgmodules[j].style.top = (newZoomTop+(disTop-oldZoomTop)*(1-heightRadio))+'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      resizeLeftTop(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let widthRadio = (left/parseFloat(this.zooms.style.width.replace('px','')));
        let heightRadio = (top/parseFloat(this.zooms.style.height.replace('px','')));
        let oldZoomLeft = parseFloat(this.zooms.style.left.replace('px',''));
        let oldZoomTop = parseFloat(this.zooms.style.top.replace('px',''));
        let newZoomLeft = oldZoomLeft+left;
        let newZoomTop = oldZoomTop+top;
        // 先变更遮罩层的宽高
        
        this.zooms.style.width = (parseFloat(this.zooms.style.width.replace('px',''))-left)+"px";
        this.zooms.style.height = (parseFloat(this.zooms.style.height.replace('px',''))-top)+"px";
        this.zooms.style.left = newZoomLeft + "px";
        this.zooms.style.top = newZoomTop + "px";
        //拖动和缩放已经选中的组件
        this.reSizeLeftTopModules(widthRadio,heightRadio,oldZoomLeft,newZoomLeft,oldZoomTop,newZoomTop);
      },
      reSizeLeftTopModules(widthRadio,heightRadio,oldZoomLeft,newZoomLeft,oldZoomTop,newZoomTop){
        let styleLeft = parseFloat(this.zooms.style.left.replace("px",""));
        let styleTop = parseFloat(this.zooms.style.top.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.width.replace("px",""));
                let disY = parseFloat(this.imgmodules[j].style.height.replace("px",""));
                let disLeft = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                let disTop = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.width = (disX - disX*widthRadio) + 'px';
                this.imgmodules[j].style.height = (disY - disY*heightRadio) + 'px';
                this.imgmodules[j].style.left = (newZoomLeft+(disLeft-oldZoomLeft)*(1-widthRadio))+'px'; 
                this.imgmodules[j].style.top = (newZoomTop+(disTop-oldZoomTop)*(1-heightRadio))+'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      /*
           左下角拉动需要计算宽高以及左侧顶部的距离
      */
      resizeLeftBottom(left,top){
        this.zooms.show = true;
        // X轴,Y轴缩小的比例 
        let widthRadio = (left/parseFloat(this.zooms.style.width.replace('px','')));
        let heightRadio = (top/parseFloat(this.zooms.style.height.replace('px','')));
        let oldZoomLeft = parseFloat(this.zooms.style.left.replace('px',''));
        let newZoomLeft = oldZoomLeft+left;
        // 先变更遮罩层的宽高
        this.zooms.style.width = (parseFloat(this.zooms.style.width.replace('px',''))-left)+"px";
        this.zooms.style.left = newZoomLeft + "px";
        this.zooms.style.height = (parseFloat(this.zooms.style.height.replace('px',''))+top)+"px";
        //拖动和缩放已经选中的组件
        this.reSizeLeftBottomModules(widthRadio,heightRadio,oldZoomLeft,newZoomLeft);
      },
      reSizeLeftBottomModules(widthRadio,heightRadio,oldZoomLeft,newZoomLeft){
        let styleLeft = parseFloat(this.zooms.style.left.replace("px",""));
        let styleTop = parseFloat(this.zooms.style.top.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.width.replace("px",""));
                let disY = parseFloat(this.imgmodules[j].style.height.replace("px",""));
                let disLeft = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                let disTop = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.width = (disX - disX*widthRadio) + 'px';
                this.imgmodules[j].style.height = (disY + disY*heightRadio) + 'px';
                this.imgmodules[j].style.left = (newZoomLeft+(disLeft-oldZoomLeft)*(1-widthRadio))+'px'; 
                this.imgmodules[j].style.top = (disTop + (disTop-styleTop)*heightRadio) + 'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      /*
        向下缩放时，重新计算宽度和高度以及左侧和顶上的距离
       */
      reSizeHeightModules(heightRadio){
        let styleTop = parseFloat(this.zooms.style.top.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disY = parseFloat(this.imgmodules[j].style.height.replace("px",""));
                let disTop = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.height = (disY + disY*heightRadio) + 'px';
                this.imgmodules[j].style.top = (disTop + (disTop-styleTop)*heightRadio) + 'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      /*
        右下角缩放时，重新计算宽度和高度以及左侧和顶上的距离
       */
      reSizeWidthModules(widthRadio){
        let styleLeft = parseFloat(this.zooms.style.left.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.width.replace("px",""));
                let disLeft = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                this.imgmodules[j].style.width = (disX + disX*widthRadio) + 'px';
                this.imgmodules[j].style.left = (disLeft+ (disLeft-styleLeft)*widthRadio) + 'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      /*
        右下角缩放时，重新计算宽度和高度以及左侧和顶上的距离
       */
      reSizeHeightAndWidthModules(widthRadio,heightRadio){
        let styleLeft = parseFloat(this.zooms.style.left.replace("px",""));
        let styleTop = parseFloat(this.zooms.style.top.replace("px",""));
          for (let j = 0; j < this.imgmodules.length; j++) {
              if (this.imgmodules[j].selects) {
                let disX = parseFloat(this.imgmodules[j].style.width.replace("px",""));
                let disY = parseFloat(this.imgmodules[j].style.height.replace("px",""));
                let disLeft = parseFloat(this.imgmodules[j].style.left.replace("px",""));
                let disTop = parseFloat(this.imgmodules[j].style.top.replace("px",""));
                this.imgmodules[j].style.width = (disX + disX*widthRadio) + 'px';
                this.imgmodules[j].style.height = (disY + disY*heightRadio) + 'px';
                this.imgmodules[j].style.left = (disLeft+ (disLeft-styleLeft)*widthRadio) + 'px';
                this.imgmodules[j].style.top = (disTop + (disTop-styleTop)*heightRadio) + 'px';
                if (this.imgmodules[j].chart) {
                  this.imgmodules[j].chart.resize();
                }
              }
          }
      },
      /*
         按下组件移动，并重新显示拖拽样式
       */
      imgModulesMouseDown(Ce,id){
        this.moduleListHidden();
        // Ce.preventDefault();
        var num = 0;
        for (let i = 0; i < this.imgmodules.length; i++) {
            if (this.imgmodules[i].id == id) {
              this.imgmodules[i].selects = true; //设置当前组件为选中
              this.imgmodules[i].style.border='1px dotted rgba(35,195,18,1)';
              num  = i;
            }else{
              if (!this.zooms.ctrenter){
                //如果没有按下ctr按键，则不把其他的组件设置为不选中
                this.imgmodules[i].selects = false;
                this.imgmodules[i].style.border='1px dotted rgba(35,195,18,0)';
              } 
            }  
        }
        //算出鼠标相对元素的位置
        let disX = parseFloat(this.imgmodules[num].style.left.replace("px",""));
        let disY = parseFloat(this.imgmodules[num].style.top.replace("px",""));
        let currentClientX = Ce.clientX;
        let currentClientY = Ce.clientY;
        this.currentmodule.id = id;
        this.currentmodule.zindex = this.imgmodules[num].style['z-index'];
        this.currentmodule.name = this.imgmodules[num].name;
        this.currentmodule.type = this.imgmodules[num].type;
        this.currentmodule.config = this.imgmodules[num].config;
        if (this.currentmodule.config.datastype=="default") {
          this.defaultsettings.datatypestyle.name="静态数据";
        }else{
          this.defaultsettings.datatypestyle.name="API";
        }

        this.defaultsettings.choosestyle.display="";
        this.defaultsettings.srcchoosestyle.display="";
        this.defaultsettings.clearnstyle.display="none";
        this.reCurrentSizeShow(disX,disY,this.imgmodules[num].style.width.replace("px",""),this.imgmodules[num].style.height.replace("px",""))
        document.onmousemove = (Ce)=>{   
            // 栅格显示
            this.modules.gridstype.display="";    
            //鼠标按下并移动的事件
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = (Ce.clientX - currentClientX)/this.modules.radio;  //左右移动的距离   
            let top = (Ce.clientY - currentClientY)/this.modules.radio; //上下移动的距离
            this.imgmodules[num].style.left = (left + disX) + 'px';
            this.imgmodules[num].style.top = (top + disY) + 'px';
            this.currentModuleMoveResize();
        };
        document.onmouseup = (Ce) => {
          this.zooms.resize  = true; //设置模式为缩放模式
          // 但是不想讓click事件执行，因此300毫秒以后再把click事件放开，这样300毫秒内click事件已经判断完毕resize了
          setTimeout(function(){
            this.zooms.resize  = false;
          }.bind(this),300);
          // 栅格消失
            this.modules.gridstype.display="none";
            document.onmousemove = null;
            document.onmouseup = null;
        };
      },
      // 当前组件移动，放大缩小时候重新计算选中组件的位置
      currentModuleMoveResize(){
        for (let i = 0; i < this.imgmodules.length; i++) {
            if (this.imgmodules[i].id==this.currentmodule.id) {
              let left = this.imgmodules[i].style.left.replace("px","");
              let top = this.imgmodules[i].style.top.replace("px","");
              let width = this.imgmodules[i].style.width.replace("px","");
              let height = this.imgmodules[i].style.height.replace("px","");
              this.reCurrentSizeShow(left,top,width,height);
            }
        }
      },
      // 重新计算当前选中组件的宽高
      reCurrentSizeShow(left,top,width,height){
        this.currentmodule.left = Math.round(left);
        this.currentmodule.top = Math.round(top);
        this.currentmodule.width = Math.round(width);
        this.currentmodule.height = Math.round(height);
      },
      imgModulesMouseUp(e){
        e.preventDefault();
      },
      imgModulesMouseMove(e){
        e.preventDefault();
      },
      //图片转换格式为Blob文件
      dataURLToBlob(dataurl) {
            let arr = dataurl.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
      },
      /*保存图片的方法（即按钮点击触发的方法）   
          第一个参数为需要保存的div的id名  
          第二个参数为保存图片的名称 */
      saveImage(divText) {
        this.$Spin.show();
        var node = document.getElementById('view-imgs');
        domtoimage.toPng(node)
        .then(function (dataUrl) {
            var blobfile = this.dataURLToBlob(dataUrl);
            var formData = new window.FormData();
            formData.append('file',blobfile);
            this.fileUpload(formData).then(function(res){
              if(res.code=="1"){
                this.defaultsettings.headimg =res.data.url;
                this.$Spin.hide();
                this.editModules();
                this.$router.push({
                  name:"imglist"
                })
              }else{
                this.$Spin.hide();
                this.$router.push({
                  name:"imglist"
                })
                this.$Message.info(res.message);
              }
            }.bind(this))
        }.bind(this),function(err){
          console.log(err)
          this.$Spin.hide();
        }.bind(this))
        .catch(function (error) {
          this.$Spin.hide();
            console.error('oops, something went wrong!', error);
        }.bind(this));
      },
      // 绘画网格
      drawGrid(color,stepx,stepy){
        var c_canvas = document.getElementById("imggriddraw")
        var ctx = c_canvas.getContext("2d");
        ctx.strokeStyle = "#f1dedf";
        ctx.strokeWidth = 1;
        ctx.lineWidth = 1;
        ctx.beginPath();
        for (var x = 0.5; x < stepx; x += 20) {
          ctx.moveTo(x, 0);
          ctx.lineTo(x, stepy);
          ctx.stroke();
        }
        for (var y = 0.5; y < stepy; y += 20) {
          ctx.moveTo(0, y);
          ctx.lineTo(stepx, y);
          ctx.stroke();
        }
        ctx.closePath();
        return;
      },
      moduleDitu(e){
        var ditu = JSON.parse(JSON.stringify(this.moduledata.state.ditu));
        var moduledatas = JSON.stringify(this.moduledata.state.ditu.data,null,2);
        var params = {
          data:ditu.data,
          geoCoordMap:ditu.geoCoordMap,
          style:ditu.style
        }
        var widgets = moduledefault.Ditu(params)
        var data = {
          id:(new Date()).valueOf(),
          type : "ditu",
          selects:false,
          name:"地图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            xAxiosbeforecontent:"+",
            yAxiosbeforecontent:"+",
            widgetdata:moduledatas,
            params:params,
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"400px",
              "height":"300px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(widgets,true)   
        })
      },
      // 基础柱状图
      moduleJiChuzhuzhuangtu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.jichuzhuzhuangtu.datas));
        var jichuzhuzhuangtu = JSON.parse(JSON.stringify(this.moduledata.state.jichuzhuzhuangtu))
        var params = {
          xAxis:jichuzhuzhuangtu.xAxis,
          yAxis:jichuzhuzhuangtu.yAxis,
          moduledatas:{
            x:jichuzhuzhuangtu.x,
            y:jichuzhuzhuangtu.y,
            label:jichuzhuzhuangtu.label,
            style:jichuzhuzhuangtu.style
          }
        }
        var widgets = moduledefault.Jichuzhuzhuangtu(params)
        var data = {
          id:(new Date()).valueOf(),
          type : "jichuzhuzhuangtu",
          selects:false,
          name:"基础柱状图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            xAxiosbeforecontent:"+",
            yAxiosbeforecontent:"+",
            widgetdata:moduledatas,
            params:params,
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"300px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(data.config.widgets,true);  
            myChart.resize();  
        })
      },
      // 玫瑰图
      moduleMeiguitu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.meiguitu.datas));
        var meiguitu = JSON.parse(JSON.stringify(this.moduledata.state.meiguitu))
        var params = {
          color:meiguitu.color,
          style:meiguitu.style,
          label:meiguitu.label,
          moduledatas:{
            x:meiguitu.x,
            y:meiguitu.y,
            label:meiguitu.label,
            legend:meiguitu.legend
          }
        }
        var widgets = moduledefault.Meiguitu(params);
        var data = {
          id:(new Date()).valueOf(),
          type : "meiguitu",
          selects:false,
          name:"玫瑰图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            widgetdata:moduledatas,
            params:params,
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"400px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(data.config.widgets,true);  
            myChart.resize();  
        })
      },
      // 进度环图
      moduleJinDuhuantu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.jinduhuantu.datas));
        var jinduhuantu = JSON.parse(JSON.stringify(this.moduledata.state.jinduhuantu))
        var params =  {
          value:jinduhuantu.value,
          name:jinduhuantu.name,
          radius:jinduhuantu.radius,
          color:jinduhuantu.color,
          style:jinduhuantu.style
        }
        var widgets = moduledefault.Jinduhuantu(params);
        var data = {
          id:(new Date()).valueOf(),
          type : "jinduhuantu",
          selects:false,
          name:"进度环图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            params:params,
            widgetdata:moduledatas,
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"200px",
              "height":"200px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(data.config.widgets,true);  
            myChart.resize();  
        })
      },
      //彩色柱状图组件 
      moduleZhuzhuangtu(e){
        // JSON.parse(JSON.stringify 深度复制，防止之后新建的时候数据污染
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.caisezhuzhuangtu.datas));
        var caisezhuzhuangtu = JSON.parse(JSON.stringify(this.moduledata.state.caisezhuzhuangtu))
        var params = {
          xAxis:caisezhuzhuangtu.xAxis,
          yAxis:caisezhuzhuangtu.yAxis,
          moduledatas:{
            x:caisezhuzhuangtu.x,
            y:caisezhuzhuangtu.y,
            label:caisezhuzhuangtu.label,
            style:caisezhuzhuangtu.style
          }
        }
        var widgets = moduledefault.Caisezhuzhuangtu(params)
        var data = {
          id:(new Date()).valueOf(),
          type : "caisezhuzhuangtu",
          selects:false,
          name:"彩色柱状图",
          config:{
            imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            xAxiosbeforecontent:"+",
            yAxiosbeforecontent:"+",
            widgetdata:moduledatas,
            params:params,
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"300px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            myChart.setOption(data.config.widgets,true);  
            myChart.resize();  
        })
      },
      // 新增条形图组件
      moduleTiaoxingtu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.tiaoxingtu.datas));
        var tiaoxingtu = JSON.parse(JSON.stringify(this.moduledata.state.tiaoxingtu))
        var params = {
          xAxis:tiaoxingtu.xAxis,
          yAxis:tiaoxingtu.yAxis,
          moduledatas:{
            x:tiaoxingtu.x,
            y:tiaoxingtu.y,
            label:tiaoxingtu.label,
            style:tiaoxingtu.style
          }
        }
        var widgets = moduledefault.Tiaoxingtu(params);
        var data = {
          id:(new Date()).valueOf(),
          type:"tiaoxingtu",
          selects:false,
          name:"条形图",
          config:{
           imgsrc:"",
            chart:true, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            datasetbeforecontent:"+", //数据样式的before是+还是-
            xAxiosbeforecontent:"+",
            yAxiosbeforecontent:"+",
            widgetdata:moduledatas,
            params:params,
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:widgets,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"300px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
        this.$nextTick(()=>{
            var myChart = echarts.init(document.getElementById(data.id));
            data.chart = myChart;
            var symbolSize = 20;
            var datas = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
            myChart.setOption(data.config.widgets,true);
            myChart.resize();
        })  /*next_tick_end*/   
      },
      moduleTupian(e){
        var data = {
          id:(new Date()).valueOf(),
          type : "tupian",
          selects:false,
          name:"图片",
          config:{
            imgsrc:"http://leqcdn.shengdianshiji.com/datamax_default_14.png",
            chart:false, //是否是百度地图组件
            img:true,//是否是图片组件
            datas:false,//是否需要数据支撑
            widgetdata:"",
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:{},
            defaultdata:""
          },
          style:{
              "width":"90px",
              "height":"90px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-130)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
      },
      // 表格
      moduleBiaoge(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.biaoge.datas));
        var biaoge = JSON.parse(JSON.stringify(this.moduledata.state.biaoge))
        var data = {
          id:(new Date()).valueOf(),
          type : "biaoge",
          selects:false,
          name:"表格",
          config:{
            imgsrc:"",
            chart:false, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            widgetdata:moduledatas,
            datasetbeforecontent:"+", //数据样式的before是+还是-
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:biaoge.config,
            defaultdata:""
          },
          style:{
              "width":"500px",
              "height":"250px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-90)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);

        this.imgtype = "";
      },
      moduleShuzitu(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.shuzitu.datas));
        var shuzitu = JSON.parse(JSON.stringify(this.moduledata.state.shuzitu))
        var data = {
          id:(new Date()).valueOf(),
          type : "shuzitu",
          selects:false,
          name:"数字图",
          config:{
            imgsrc:"",
            chart:false, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            widgetdata:moduledatas,
            datasetbeforecontent:"+", //数据样式的before是+还是-
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:shuzitu.config,
            defaultdata:""
          },
          style:{
              "width":"330px",
              "height":"65px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-90)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
      },
      // 单行文本
      moduleDanhangwenben(e){
        var moduledatas = JSON.parse(JSON.stringify(this.moduledata.state.danhangwenben.datas));
        var danhangwenben = JSON.parse(JSON.stringify(this.moduledata.state.danhangwenben))
        var data = {
          id:(new Date()).valueOf(),
          type : "danhangwenben",
          selects:false,
          name:"单行文本",
          config:{
            imgsrc:"http://leqcdn.shengdianshiji.com/datamax_default_14.png",
            chart:false, //是否是百度地图组件
            img:false,//是否是图片组件
            datas:true,//是否需要数据支撑
            widgetdata:moduledatas,
            datasetbeforecontent:"+", //数据样式的before是+还是-
            datastype:"default",//获取数据类型 default和api两种
            autodata:"关闭",
            autodatatime:"10",
            apitypeselect:"POST",//默认显示post
            api:"",
            widgets:danhangwenben.config,
            defaultdata:""
          },
          style:{
              "width":"200px",
              "height":"40px",
              "left":(e.clientX-100)/this.modules.radio+"px",
              "top":(e.clientY-90)/this.modules.radio+"px",
              "z-index":'1',
              "border":'1px dotted rgba(35,195,18,0)',
              "position":"absolute",
              "display":""
          }
        } /*data_end*/
        this.imgmodules.push(data);
        this.imgtype = "";
      },
      // 重新设置彩色柱状图的样式
      reCaisezhuzhuangtu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Caisezhuzhuangtu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Caisezhuzhuangtu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Caisezhuzhuangtu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
      },
      // 重新设置堆叠柱状图的样式
      reDuidiezhuzhuangtu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Duidiezhuzhuangtu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Duidiezhuzhuangtu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Duidiezhuzhuangtu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
      },
      // 重新设置交错正负轴标签图
      reJiaocuozhengfuzhoubiaoqiantu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Jiaocuozhengfuzhoubiaoqiantu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Jiaocuozhengfuzhoubiaoqiantu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Jiaocuozhengfuzhoubiaoqiantu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
      },
      reQiantaobingtu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Qiantaobingtu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Qiantaobingtu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).data){
                         return;
                       }
                       params.moduledatas.data = JSON.parse(res.data).data||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "data":params.moduledatas.data,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Qiantaobingtu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
      },
      reJizuobiaozhuzhuangtu(j,id){
         for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Jizuobiaozhuzhuangtu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Jizuobiaozhuzhuangtu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Jizuobiaozhuzhuangtu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
      },
      // 重新设置玫瑰图的样式，涉及到函数
      reMeiGuitu(j,id){
         for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Meiguitu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Meiguitu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.label = JSON.parse(res.data).label||"值";
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Meiguitu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        } //for_end
      },
      // 重新设置日历图的样式
      reRilitu(j, id) {
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id == id) {
            var currentmodule = this.imgmodules[i];
            if ((currentmodule.config.datas && currentmodule.config.datastype == "default") || (currentmodule.config.datas && currentmodule.config.datastype == "api" && !currentmodule.config.api)) {//如果是静态资源
              var params = currentmodule.config.params;
              var widgets = moduledefault.rilitu(params);
              currentmodule.config.widgets = widgets;//重新赋值options；
              // var scatterData = this.getVirtulData(params.month);
              // var dayArr = scatterData.filter(item => {//计算出一个月有几个星期日，来算出高度。
              //   return new Date(item).getDay() == 0;
              // })
              // var num = dayArr.length + 3;
              // var width = (params.cellSize * 7 + 60) + 'px';//盒子宽度
              // var height = (params.cellSize * num + 170) + 'px';//盒子高度
              // currentmodule.style.width = width;//然后重新赋值宽度
              // currentmodule.style.height = height;//然后重新赋值高度
              this.$nextTick(() => {
                if (currentmodule.config.datas && currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets);
                    currentmodule.chart.resize();
                    this.$nextTick(() => {
                      currentmodule.chart.setOption({
                        series: moduledefault.getPieSeries(params, currentmodule.chart)
                      });
                    })
                  } else {
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets, true);
                    currentmodule.chart.setOption({
                      series: moduledefault.getPieSeries(params, currentmodule.chart)
                    });
                    currentmodule.chart.resize();
                  }
                }
              })
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                          currentmodule.chart.setOption(currentmodule.config.widgets);
                          currentmodule.chart.resize();
                          this.$nextTick(() => {
                            currentmodule.chart.setOption({
                              series: moduledefault.getPieSeries(params, currentmodule.chart)
                            });
                          })
                           return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.x = JSON.parse(res.data).x||[];
                       params.y = JSON.parse(res.data).y||[];
                       params.label = JSON.parse(res.data).label||"值";
                       var data = {
                        "x":params.x,
                        "y":params.y,
                        "label":params.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.rilitu(params);
                       currentmodule.config.widgets = widgets;
                       this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets);
                              currentmodule.chart.resize();
                              this.$nextTick(() => {
                                currentmodule.chart.setOption({
                                  series: moduledefault.getPieSeries(params, currentmodule.chart)
                                });
                              })
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets);
                              currentmodule.chart.resize();
                              this.$nextTick(() => {
                                currentmodule.chart.setOption({
                                  series: moduledefault.getPieSeries(params, currentmodule.chart)
                                });
                              })
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
            // else_end
          }
        }
      },
      // 根据当前时间获取出当前月份的所有天数
      getVirtulData(month) {
        var time = new Date(month);
        var year = time.getFullYear();
        var month =
          time.getMonth() + 1 < 10
            ? "0" + (time.getMonth() + 1)
            : time.getMonth() + 1;
        var startTime = year + "-" + month + "-01"; //先获取到当前时间的月份第一天
        var endTime =
          year +
          "-" +
          (time.getMonth() + 2 < 10
            ? "0" + (time.getMonth() + 2)
            : time.getMonth() + 2) +
          "-01"; //当前月份的下个月的第一天
        var date = +echarts.number.parseDate(startTime);
        var end = +echarts.number.parseDate(endTime);
        var dayTime = 3600 * 24 * 1000;
        var data = [];
        for (var time = date; time < end; time += dayTime) {
          var str = 0;
          data.push([echarts.format.formatTime("yyyy-MM-dd", time), str]);
          str++;
        }
        return data;
      },
      reBiaoge(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if (currentmodule.config.datas&&currentmodule.config.datastype=="default") {
              // var widgets = currentmodule.config.widgets;
              // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api+"?pageSize="+this.pagesize+"&currentPage="+this.currentpage,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    currentmodule.config.widgets.y=[];
                    this.ajaxs(param).then(function(res){
                       var widgets = currentmodule.config.widgets;
                       if (res.code!="1") {
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       if (JSON.parse(res.data).totalSize) {
                         this.total =  JSON.parse(res.data).totalSize;
                       }
                       widgets.x = JSON.parse(res.data).x||[];
                       widgets.y = JSON.parse(res.data).y||[];
                       var data = {
                        "x":widgets.x,
                        "y":widgets.y
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        } //for_end
      },
      reShuzitu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if (currentmodule.config.datas&&currentmodule.config.datastype=="default") {
              // var widgets = currentmodule.config.widgets;
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var widgets = currentmodule.config.widgets;
                       if (res.code!="1") {
                         return;
                       }
                       if(!JSON.parse(res.data).text){
                         return;
                       }
                       widgets.text = JSON.parse(res.data).text||"";
                       var data = {
                        "text":widgets.text
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        } //for_end
      },
      reDanhangwenben(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if (currentmodule.config.datas&&currentmodule.config.datastype=="default") {
              // var widgets = currentmodule.config.widgets;
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var widgets = currentmodule.config.widgets;
                       if (res.code!="1") {
                         return;
                       }
                       if(!JSON.parse(res.data).text){
                          widgets.text = 0;
                       }else{
                          widgets.text = JSON.parse(res.data).text||"";
                       }
                       widgets.text = JSON.parse(res.data).text||"";
                       var data = {
                        "text":widgets.text
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        } //for_end
      },
      reJinduhuantu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Jinduhuantu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Meiguitu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).value||!JSON.parse(res.data).y){
                         return;
                       }
                       params.value = JSON.parse(res.data).value||"0";
                       params.name = JSON.parse(res.data).name||"百分比";
                       var data = {
                        "value":params.value,
                        "name":params.name
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Jinduhuantu(params);
                       currentmodule.config.widgets = widgets;
                       this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        } //for_end
      },
      reDitu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Ditu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       params.data = JSON.parse(res.data).data||[];
                       var data = {
                        "data":params.data,
                        "geoCoordMap":params.geoCoordMap,
                        "style":params.style
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Ditu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
        // var params = this.imgmodules[i].config.params;
        // var widgets = moduledefault.Tiaoxingtu(params);
        // this.imgmodules[i].config.widgets = widgets;
      },
      reTiaoxingtu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              var widgets = moduledefault.Tiaoxingtu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Tiaoxingtu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if(!JSON.parse(res.data).x||!JSON.parse(res.data).y){
                         return;
                       }
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Tiaoxingtu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }
                }
              }
            }
          }//if_end
        }
        // var params = this.imgmodules[i].config.params;
        // var widgets = moduledefault.Tiaoxingtu(params);
        // this.imgmodules[i].config.widgets = widgets;
      },
      // 基础柱状图数据重新编排页面样式
      reJichuzhuzhuangtu(j,id){
        for (let i = 0; i < this.imgmodules.length; i++) {
          if (this.imgmodules[i].id==id) {
            var currentmodule = this.imgmodules[i];
            // 如果是静态数据
            if ((currentmodule.config.datas&&currentmodule.config.datastype=="default")||(currentmodule.config.datas&&currentmodule.config.datastype=="api"&&!currentmodule.config.api)) {
              var params = currentmodule.config.params;
              params.x = JSON.parse(currentmodule.config.widgetdata).x;
              params.y = JSON.parse(currentmodule.config.widgetdata).y;
              params.moduledatas.y = JSON.parse(currentmodule.config.widgetdata).y;
              params.moduledatas.x = JSON.parse(currentmodule.config.widgetdata).x;
              var widgets = moduledefault.Jichuzhuzhuangtu(params);
              currentmodule.config.widgets = widgets;
              this.$nextTick(() => {
                if (currentmodule.config.datas&&currentmodule.config.chart) {
                  if (currentmodule.chart) {
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  }else{
                    var myChart = echarts.init(document.getElementById(id));
                    currentmodule.chart = myChart;
                    currentmodule.chart.setOption(currentmodule.config.widgets,true);
                    currentmodule.chart.resize();
                  } 
                }   
              })
            // 如果是api请求数据
            }else if (currentmodule.config.datas&&currentmodule.config.datastype=="api"&&currentmodule.config.api){
              if (currentmodule.config.datas&&currentmodule.config.datastype=="api") {
                if (currentmodule.config.api) {
                  var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                  var objExp=new RegExp(Expression);
                  if(objExp.test(currentmodule.config.api)==true){
                    var param ={
                      api: currentmodule.config.api,
                      type:currentmodule.config.apitypeselect,
                      cityId:this.cityid
                    }
                    this.ajaxs(param).then(function(res){
                       var params = currentmodule.config.params;
                       if (res.code!="1") {
                        this.$nextTick(() => {
                          var widgets = moduledefault.Jichuzhuzhuangtu(params);
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              myChart.setOption(widgets,true);
                              myChart.resize();
                          }   
                         })
                         return;
                       }
                       if (!JSON.parse(res.data).x||!JSON.parse(res.data).y) {
                         return;
                       }
                       params.moduledatas.x = JSON.parse(res.data).x||[];
                       params.moduledatas.y = JSON.parse(res.data).y||[];
                       params.moduledatas.label = JSON.parse(res.data).label||[];
                       var data = {
                        "x":params.moduledatas.x,
                        "y":params.moduledatas.y,
                        "label":params.moduledatas.label
                       }
                       currentmodule.config.widgetdata = JSON.stringify(data, null, 2);
                       var widgets = moduledefault.Jichuzhuzhuangtu(params);
                       currentmodule.config.widgets = widgets;
                        this.$nextTick(() => {
                          if (currentmodule.config.datas&&currentmodule.config.chart) {
                            if (currentmodule.chart) {
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            }else{
                              var myChart = echarts.init(document.getElementById(id));
                              currentmodule.chart = myChart;
                              currentmodule.chart.setOption(currentmodule.config.widgets,true);
                              currentmodule.chart.resize();
                            } 
                          }   
                        })
                    }.bind(this))  
                  }// if(objExp.test(currentmodule.config.api)==true)
                }// if (currentmodule.config.api)_end
              }
            }
          }//if_end
        }
      }, // reJichuzhuzhuangtu_end
      apiChange(e){
        var api = e.target.value;
        var Expression=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
        var objExp=new RegExp(Expression);
        if(objExp.test(api)==true){
          this.currentmodule.config.api = api;
          var params ={
            api: api,
            type:this.currentmodule.config.apitypeselect
          }
          this.ajaxs(params).then(function(){
               
          })  
        }else{
          this.$Message.info("API地址错误！")
        }
      },
      ajaxs(params){
        return new Promise((resolve, reject) => {
          this.ajax({params}).then(function(res){
            resolve(res)
          },function(err){
            console.log(err);
            reject(err)
          })
        })
      }
    }
  }
</script>
<style scoped  lang="less">
  
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "../../assets/less/style.less";

  li{
    list-style-type:none;
  }
  .datamax{
    .view-container{
      /* position: absolute; */
      /* top: 0px; */
      width: 100%;
      height:100%;
      cursor: default;
      background: #666;
      #view-profile{
        height: 100%;
        width: 100%;
      #view-imgs{
        transform-origin: left bottom;
        #imggrid{
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          #imggriddraw{
            width: 100%;
            height: 100%;
          }
        }
        #imgmodules{
          position: absolute;
          left: 0px;
          overflow: hidden;
          width: 100%;
          height: 100%;
        }
      }
      /* #view-imgs_end */
     }
     /* #view-profile_end */
    }
  }
  .imgmoduleitem{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
  }
  .imgmoduleitemSelect_box {
  display: flex;
  justify-content: center;

  .imgmoduleitem_time {
    color: #fff;
    display: flex;
    align-items: center;
    margin-right: 100px;
    .imgmoduleitem_time_span {
      margin-right: 15px;
    }

    .time_box {
      width: 160px;
      height: 35px;
      position: relative;
      margin-right: 20px;

      .time_box_p {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        padding-right: 5px;
        border: 1px solid #0e6a99;
        background: rgba(12, 49, 95, 0.7);
        box-shadow: 0 0 5px #0e6a99 inset;
        input {
          width: 90%;
          height: 100%;
          border: none;
          background: transparent;
          color: #fff;
          padding-left: 5px;
          &::placeholder {
            color: #fff;
          }
        }
      }
      .imgmoduleitem_select {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
      }
      .sheng_select {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        opacity: 0;
        option {
          width: 100%;
          height: 35px;
          background: rgba(12, 49, 95, 1);
          color: #fff;
        }
      }
    }
  }
}
.table-pages{
  margin-top: 10px;
}
.table-pages /deep/ li{
  background-color: rgba(255,255,255,0.3) !important;
}
.table-pages /deep/ .ivu-page-item a{
  color: #fff;
}
.table-pages  /deep/  .ivu-icon{
  color: #fff;
}
.table-pages /deep/ .ivu-page-item-active   a{
  color:#2d8cf0;
}
</style>
